import React, {Fragment} from "react";
import './HezhangInfo.less';
import {getAdministrativeArea, getHezhangInfo, addHezhangInfo, delHezhangInfo, getSingleHezhangInfo, modHezhangInfo} from '../../../service/api';
import Trees from '../../../components/Trees/Trees';
import { Table, Button, Form, Input, Modal, Row, Col, Select, Cascader, message, Popconfirm, Spin } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

class AddHezhangInfo extends React.Component {

    state = {
        visible: false,
        confirmLoading: false,
        area: []
    }

    showModal = () => {

        if(!this.state.area.length){
            let self = this;
            getAdministrativeArea().then(function (data) {
                if(data.code === 200){
                    self.setState({area: data.data})
                }
            })
        }

        this.setState({
            visible: true
        });
    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({
            visible: false,
            confirmLoading: false
        });
    }

    handleOk = () => {
        let self = this;
        this.props.form.validateFields((err, values) => {
            if (!err) {

                values.regionid = values.regionid[values.regionid.length-1];

                self.setState({
                    confirmLoading: true,
                });


                addHezhangInfo(values).then(function (data) {
                    if(data.code === 200){
                        self.setState({
                            visible: false,
                            confirmLoading: false,
                        })
                        self.props.retrieve();

                        message.success("添加成功");
                    }else{
                        message.error(data.msg);
                        self.setState({
                            confirmLoading: false
                        })
                    }
                })

            }
        });

    }

    render() {
        const {visible, confirmLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <Fragment>
                <Button className="fl addNew formAddBtn" type="primary" onClick={this.showModal}>新增</Button>
                <Modal title="新增河长信息"
                       visible={visible}
                       maskClosable={false}
                       onOk={this.handleOk}
                       confirmLoading={confirmLoading}
                       onCancel={this.handleCancel}
                       okText="提交"
                       cancelText="取消"
                       width="80%"
                >
                    <Form className="modalForm">
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="地区">
                                    {getFieldDecorator('regionid',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请选择地区" }],
                                    })(
                                        <Cascader options={this.state.area} style={{width: '100%'}} placeholder='请选择地区' changeOnSelect />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长姓名">
                                    {getFieldDecorator('riverchiefname',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河长姓名" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河长级别">
                                    {getFieldDecorator('rclevel',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河长级别" }],
                                    })(
                                        <Input placeholder="河长级别" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长职务">
                                    {getFieldDecorator('riverchiefduties',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河长职务" }],
                                    })(
                                        <Input placeholder="河长职务" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="联系方式">
                                    {getFieldDecorator('riverchiefcontact',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写联系方式" }],
                                    })(
                                        <Input placeholder="联系方式" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="排序">
                                    {getFieldDecorator('orderby',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写排序" }],
                                    })(
                                        <Input placeholder="排序" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>

                </Modal>
            </Fragment>
        )
    }

}
const AddHezhangInfoForm = Form.create()(AddHezhangInfo);

class ModHezhangInfo extends React.Component {

    state = {
        visible: false,
        confirmLoading: false,
        area: []
    }

    showModal = () => {
        let self = this;
        if(!this.state.area.length){
            let self = this;
            getAdministrativeArea().then(function (data) {
                if(data.code === 200){
                    self.setState({area: data.data})
                }
            })
        }
        self.setState({loading: true, id: this.props.id});
        getSingleHezhangInfo(this.props.id).then(function (data) {
            if(data.code === 200){
                self.setState({data: data.data, loading: false})
            }
        });



        this.setState({
            visible: true
        });
    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({
            visible: false,
            confirmLoading: false
        });
    }

    handleOk = () => {
        let self = this;
        this.props.form.validateFields((err, values) => {
            if (!err) {

                values.regionid = values.regionid[values.regionid.length-1];

                self.setState({
                    confirmLoading: true,
                });

                modHezhangInfo(this.state.id, values).then(function (data) {
                    if(data.code === 200){
                        self.setState({
                            visible: false,
                            confirmLoading: false,
                        })
                        self.props.retrieve();

                        message.success("修改成功");
                    }else{
                        message.error(data.msg);
                        self.setState({
                            confirmLoading: false
                        })
                    }
                })

            }
        });

    }

    render() {
        const {visible, confirmLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <Fragment>
                <Button type="primary" onClick={this.showModal}>修改</Button>
                <Modal title="修改河长信息"
                       visible={visible}
                       maskClosable={false}
                       onOk={this.handleOk}
                       confirmLoading={confirmLoading}
                       onCancel={this.handleCancel}
                       okText="提交"
                       cancelText="取消"
                       width="80%"
                >
                    <Spin spinning={this.state.loading}>
                    {this.state.data?<Form className="modalForm">
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="地区">
                                    {getFieldDecorator('regionid',{
                                        initialValue: this.state.data.regionIds,
                                        rules: [{ required: true, message: "请选择地区" }],
                                    })(
                                        <Cascader options={this.state.area} style={{width: '100%'}} placeholder='请选择地区' changeOnSelect />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长姓名">
                                    {getFieldDecorator('riverchiefname',{
                                        initialValue: this.state.data.riverchiefname,
                                        rules: [{ required: true, message: "请填写河长姓名" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河长级别">
                                    {getFieldDecorator('rclevel',{
                                        initialValue: this.state.data.rclevel,
                                        rules: [{ required: true, message: "请填写河长级别" }],
                                    })(
                                        <Input placeholder="河长级别" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河长职务">
                                    {getFieldDecorator('riverchiefduties',{
                                        initialValue: this.state.data.riverchiefduties,
                                        rules: [{ required: true, message: "请填写河长职务" }],
                                    })(
                                        <Input placeholder="河长职务" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="联系方式">
                                    {getFieldDecorator('riverchiefcontact',{
                                        initialValue: this.state.data.riverchiefcontact,
                                        rules: [{ required: true, message: "请填写联系方式" }],
                                    })(
                                        <Input placeholder="联系方式" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="排序">
                                    {getFieldDecorator('orderby',{
                                        initialValue: this.state.data.orderby,
                                        rules: [{ required: true, message: "请填写排序" }],
                                    })(
                                        <Input placeholder="排序" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>:true}
                    </Spin>
                </Modal>
            </Fragment>
        )
    }

}
const ModHezhangInfoForm = Form.create()(ModHezhangInfo);

let columns = [];
const columns1 = [
    {
        dataIndex: 'id',
        title: 'id',
        width: 80
    },
    {
        dataIndex: 'riverchiefduties',
        title: '河长职务',
        width: 120
    },
    {
        dataIndex: 'riverchiefname',
        title: '河长姓名',
        width: 100
    },
    {
        dataIndex: 'rclevel',
        title: '河长级别',
        width: 60
    },
    {
        dataIndex: 'riverchiefcontact',
        title: '联系方式',
        width: 150
    }
]

class HezhangInfo extends React.Component {

    state = {
        permissions: JSON.parse(localStorage.permissions),
        limit: 20,
        offset: 0,
        regionID: "",
        riverChiefName: "",
        riverchiefcontact: "",
        modVisible: false,
        data: [],
        loading: true,
        pagination: {pageSize: 20},
        height: document.body.clientHeight - 230,
    }

    componentDidMount() {

        let arr = [
            {
                title: '操作',
                width: 150,
                render: (record) => (
                    <div className="tableOperation">
                        {/*{this.state.permissions["sys:riverChief:update"]?<Button type="primary" id={record.id} onClick={ () => this.mod(record.id)}>修改</Button>:true}*/}
                        {this.state.permissions["sys:riverChief:update"]?<ModHezhangInfoForm retrieve={this.getData} id={record.id} />:true}

                        {this.state.permissions["sys:riverChief:delete"]?
                            <Popconfirm placement="leftBottom" title={`确定删除:${record.riverchiefname}吗?`} id={record.id.toString()} onConfirm={() => this.del(record.id)} okText="确定" cancelText="取消">
                                <Button type="danger" className="ml10" id={record.id} ghost>删除</Button>
                            </Popconfirm>:true}
                    </div>
                )
            }
        ]

        columns = columns1.concat(arr);

        this.getData();
    }

    componentWillUnmount(){
        columns = columns1;
    }

    getData = () => {
        let self = this;
        const pagination = { ...this.state.pagination };
        self.setState({loading: true});
        getHezhangInfo({
            limit: this.state.limit,
            offset: this.state.offset,
            regionID: this.state.regionID,
            riverChiefName: this.state.riverChiefName,
        }).then(function (data) {
            pagination.total = data.data.total;
            if(data.code === 200){
                self.setState({data: data.data.rows, showData: data.data.rows, loading: false, pagination})
            }
        })

    }

    handleTableChange = (pagination, filters, sorter)=> {
        this.setState({loading: true, offset: (pagination.current-1)*pagination.pageSize},function () {
            this.getData();
        })
    }

    getId = (value)=> {
        this.setState({
            regionID: value[0]
        }, () => {
            this.getData();
        })
    }

    mod = (id) => {

        this.setState({
            modVisible: true,
            modId: id
        })

    }

    del = (id) => {
        let self = this;
        delHezhangInfo(id).then(function (data) {
            if(JSON.parse(data).code === 200){
                self.getData();
                message.success("删除成功");
            }else{
                message.error(data.msg)
            }
        })
    }

    turnModalDown = () => {
        this.setState({
            modVisible: false
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            this.setState({
                riverChiefName: values.riverChiefName
            }, () => {
                this.getData();
            })
        })

    }

    render(){
        const { getFieldDecorator } = this.props.form;
        let data = [];
        for(let i in this.state.data){
            data.push({
                key: i,
                id: this.state.data[i].id,
                riverchiefduties: this.state.data[i].riverchiefduties,
                riverchiefname: this.state.data[i].riverchiefname,
                rclevel: this.state.data[i].rclevel,
                riverchiefcontact: this.state.data[i].riverchiefcontact,
            })
        }

        return(
                <div className="clearfix hezhangInfo page">
                    <div className="treeArea">
                        <Trees getId={this.getId} />
                    </div>
                    <div className="mt10 tableArea">
                        <div className="clearfix tableFilter">
                            <Form className="fl searchForm" layout="inline" onSubmit={this.handleSubmit}>
                                <FormItem>
                                    {getFieldDecorator('riverChiefName',{
                                        initialValue: ""
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>

                                <FormItem>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                    >
                                        查询
                                    </Button>
                                </FormItem>
                            </Form>
                            {this.state.permissions["sys:riverChief:add"]?<AddHezhangInfoForm retrieve={this.getData} />:true}
                        </div>
                        <Table className="mt10 scrollTable" columns={columns} dataSource={data} loading={this.state.loading} pagination={this.state.pagination} onChange={this.handleTableChange} scroll={{y: this.state.height }} bordered />
                    </div>
                </div>
        )
    }

}
const HezhangInfoForm = Form.create()(HezhangInfo);
export default HezhangInfoForm;